<template>
  <div class="container">
      <div class="header">
        <span class="header_name">{{nickname}}</span>
        <img src="http://file.rzkeji.com/web/daka/icon/paiming.png" class="header_img" />
        <span class="header_number">第 {{number}} 名</span>
      </div>
      <div class="nav">
        <ul>
          <li :class="{select:value.select}" v-for="(value,index) in nav" @click="select(index)">
          {{value.title}}</li>
        </ul>
      </div>
      <div class="details">
         积分规则：每天打开1次+10分，点赞+1分[单日上限为10分]，评论+2分[单日上限为10分]
      </div>
      <ul class="rank">
        <li v-for="(value,index) in showDate">
          <img src="http://file.rzkeji.com/web/daka/icon/icon-paiming1.png" class="icon" v-if="index==0"/>
          <img src="http://file.rzkeji.com/web/daka/icon/icon-paiming2.png" class="icon" v-else-if="index==1"/>
          <img src="http://file.rzkeji.com/web/daka/icon/icon-paiming3.png" class="icon" v-else-if="index==2"/>
          <span class="icon iconSpan" v-else>{{index+1}}</span>

          <img :src="value.userinfo.photo_url" class="headImg"/>
          <span class="nickname">{{value.userinfo.nickname}}</span>
          <span class="score">{{value.ranking_num}}分</span>
        </li>
      </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
    nav:[
    {
      title:'今日',
      select:true
    },
    {
      title:'本周',
      select:false
    },
    {
      title:'总榜',
      select:false
    }
    ],
    type:"0",   //0代表今天    1 代表本周   2代表总榜
    number:"",
    all_list:"",
    today_list:"",
    week_list:"",
    showDate:"",
    nickname:""
  }
 },
  methods: {
    select(index)
    {
      this.selectData(index)
      for(var i=0;i<this.nav.length;i++)
      {
        this.nav[i].select=false;

      }
      this.nav[index].select=true;
    },
    selectData(index)
    {
    	if(index==0)
    	{
    		this.showDate=this.today_list;
    	}else if(index==1)
    	{
    		this.showDate=this.week_list;
    	}else{
    		this.showDate=this.all_list;
    	}
    }
  },
  onShow(){
    var _this=this;
    _this.nickname=_this.$store.state.information.nickname;
    var userToken=wx.getStorageSync('userToken');
    wx.request({
      url:"https://daka.rzkeji.com/api/ucenter/get-ranking",
        data:{
          daka_token:userToken
        },
        method:'get',
        header:{
          "content-type":"application/json"
        },
        success(res){
          _this.number=res.data.data.my_rank;
          _this.all_list=res.data.data.all_list;
          _this.week_list=res.data.data.week_list;
          _this.today_list=res.data.data.today_list;
          _this.showDate=_this.today_list;
        }
    })
  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;background: #e4e4e4;}
.header{width: 100%;height: 90px;padding-top: 10px;background: #3a383f;color: #fff;position: relative;}
.header_name{height: 30px;line-height: 30px;text-align: center;width: 100%;display: block;}
.header_img{width: 118px;height: 41px;position: absolute;left: 50%;top: 50%;margin-left: -59px;}
.header_number{width: 80px;height: 25px;line-height: 25px;text-align: center;position: absolute;left: 50%;top: 50%;margin-left: -40px;display: block;}
.nav{width: 100%;height: 40px;background: #fff}
.nav ul{width: 100%;height: 40px;display: flex;justify-content: row}
.nav ul li{width: 33.3%;height: 40px;line-height: 40px;text-align: center}
.nav ul li.select{border-bottom:1px solid green;}
.details{background: #fff;width: 100%;padding-bottom: 5px;font-size: 15px;padding-top: 10px;padding-left: 5px;margin-top: 10px;overflow: hidden;}

ul.rank{width: 100%;margin-top: 10px;background: #fff;padding-top: 10px}
ul.rank li{width: 100%;height: 55px;display: flex;justify-content: row;line-height: 50px;padding-top: 5px;}
.icon{width: 35px;height: 35px;margin-left: 10px;}
.iconSpan{text-align: center;line-height: 35px;}
.headImg{width: 40px;height: 40px;border-radius: 40px;margin-left: 10px;}
.nickname{width:200px;height: 50px;margin-left: 20px;display: block;font-size: 16px;}
.score{width:50px;height: 50px;display: block;margin-left: 10px;text-align: center;font-size: 18px;}
</style>
